<template>
  <div id="readContract">
    <h3 class="table">
      工程建设领域简易劳动合同
      <el-button class="saveBtn exportContract" @click="exportContract"
        >导出</el-button
      >
    </h3>
    <!-- <div  style="margin-top:20px" class="clearfix">
          <div class="fr">
            合同编号<span class="empty">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
          </div>
        </div> -->
    <ul class="content" style="margin-top: 10px">
      <li style="text-indent: 0">
        <el-row>
          <el-col :span="10">
            甲方(用人单位)：
            <span>{{ this.contractInfos.companyName || '--' }}</span>
          </el-col>
          <el-col :span="12">
            经营地址
            <span>{{ this.contractInfos.officeAddress || '--' }}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            工程项目负责人：
            <span>{{ this.contractInfos.leader || '--' }}</span>
          </el-col>
          <el-col :span="14">
            联系电话：
            <span>{{ this.contractInfos.leaderTel || '--' }}</span>
          </el-col>
        </el-row>
        <!-- <div class="clearfix" >
                    <div class="fl box">
                        甲方(用人单位)：
                        <span>{{this.contractInfos.companyName || "--"}}</span>
                    </div>
                    <div class="fr">
                        经营地址
                        <span>{{this.contractInfos.officeAddress || "--"}}</span>
                    </div>
                </div>
                <div class="clearfix">
                    <div class="fl box">
                        工程项目负责人：
                        <span>{{this.contractInfos.leader || "--"}}</span>
                    </div>
                    <div class="fr">
                        联系电话：
                        <span>{{this.contractInfos.leaderTel || "--"}}</span>
                    </div>
                </div> -->
      </li>

      <li style="text-indent: 0">
        <el-row>
          <el-col :span="10">
            乙方(劳动者)：
            <span>{{ this.contractInfos.employeeName || '--' }}</span>
          </el-col>
          <el-col :span="14">
            通讯地址：
            <span>{{ this.contractInfos.employeeAddress || '--' }}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            居民身份证号码：
            <span>{{ this.contractInfos.idcard || '--' }}</span>
          </el-col>
          <el-col :span="14">
            联系电话：
            <span>{{ this.contractInfos.employeeTel || '--' }}</span>
          </el-col>
        </el-row>
        <!-- <div class="clearfix">
                    <div class="fl box">
                        乙方(劳动者)：
                        <span>{{this.contractInfos.employeeName || "--"}}</span>
                    </div>
                    <div class="fr">
                        通讯地址：
                        <span>{{this.contractInfos.employeeAddress || "--"}}</span>
                    </div>
                </div>
                <div class="clearfix">
                    <div class="fl box">
                        居民身份证号码：
                        <span>{{this.contractInfos.idcard || "--"}}</span>
                    </div>
                    <div class="fr">
                        联系电话：
                        <span>{{this.contractInfos.employeeTel || "--"}}</span>
                    </div>
                </div> -->
      </li>
      <li>
        根据《中华人民共和国劳动法》《中华人民共和国劳动合同法》等法律规定，甲乙双方平等自愿、协商一致订立本合同。
      </li>
      <li>
        <div>
          第一条
          双方约定按第<span>&nbsp;</span>种方式确定合同期限（1.以完成一定工作任务为期限；2.固定期限），自
          <span>{{ this.contractInfos.beginTimeYear || '--' }}</span
          >年 <span>{{ this.contractInfos.beginTimeMonth || '--' }}</span
          >月 <span>{{ this.contractInfos.beginTimeDay || '--' }}</span
          >日 起至 <span>{{ this.contractInfos.endTime || '--' }}</span
          >止。
        </div>
      </li>
      <li>
        <div>
          第二条 乙方工作的工程项目名称为
          <span>{{ this.contractInfos.projectName || '--' }}</span
          >，工作地点为 <span>{{ this.contractInfos.address || '--' }}</span
          >，工作岗位(工种)为
          <span>{{ this.contractInfos.workTypeName || '--' }}</span
          >，工作内容为 <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>。
        </div>
      </li>
      <li>
        <div class="desc">
          第三条 双方约定采用以下第
          <span>&nbsp;&nbsp;</span
          >种工资计酬方式，甲方委托本项目施工总承包单位以银行转账方式支付乙方的工资。
        </div>
        <div class="desc">
          <b>1.计时工资：</b>
          每
          <span>{{ this.contractInfos.unitName || '--' }}</span
          >（月/周/日/小时）工资为
          <span>{{ this.contractInfos.singlePriceDay || '--' }}</span
          >元，具体支付日期为
          <span>{{ this.contractInfos.salaryDayStr || '--' }}</span
          >。    
        </div>
        <div class="desc">
          <b>2.计件工资：</b>
          计件单价为
          <span>{{ this.contractInfos.pieceUnit || '--' }}</span
          >，工资结算周期为
          <span>{{ this.contractInfos.salaryCycle || '--' }}</span>
          。结算周期超过一个月的，甲方应当于每月
          <span>{{ this.contractInfos.pieceSalaryDayStr || '--' }}</span
          >前向乙方支付一次工资
          <span>{{ this.contractInfos.piecePriceStr || '--' }}</span
          >元。甲方应在乙方工资结算周期届满时向乙方付清工资。
        </div>
        <div class="desc">
          <b>3.以完成一定工作任务计发工资：</b>
          工资分配办法和结算周期为
          <!-- <span>{{this.contractInfos.pieceUnit || "--"}}</span> 。结算周期超过一个月的，甲方应当于每月 -->
          <span>&nbsp;&nbsp;</span> 。结算周期超过一个月的，甲方应当于每月
          <span>&nbsp;</span>前向乙方支付一次工资
          <span>&nbsp;&nbsp;</span
          >元。甲方应在乙方工资结算周期届满时向乙方付清工资。
        </div>
        <div class="desc">
          <b>4.按施工进度或节点为周期支付工资：</b>
          <span>&nbsp;&nbsp;</span> 。甲方应当于每月
          <span>&nbsp;&nbsp;</span> 前向乙方支付一次工资
          <span>&nbsp;&nbsp;</span>
          元。甲方应在达到约定的施工进度或节点时向乙方付清工资。
        </div>
        <div class="desc">
          <b>5.双方约定的其他方式：</b>
          <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        </div>
      </li>
      <li>
        无论采取以上哪一种工资计酬方式，甲方都应最迟在农历正月初一的前七天结算并付清乙方上年度全年工资余额。
      </li>
      <li>
        <div>
          第四条
          甲方按照国家有关规定落实劳动保护措施，提供必需劳动条件；乙方应当服从甲方用工实名制管理,劳动过程中严格遵守各项规章制度和操作规程。
        </div>
      </li>
      <li>
        <div>
          第五条
          甲方为乙方购买本工程项目一次性工伤保险。乙方工资报酬中若含有应由甲方依法代扣代缴费用项目的，甲方应当履行代扣代缴义务并告知乙方。
        </div>
      </li>
      <li>
        <div>
          第六条 双方依法约定的其他事项：
          <span
            >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span
          >
        </div>
      </li>
      <li>
        <div>
          第七条
          本合同一式三份,甲乙双方各执一份，甲方报施工总承包单位工程项目部备存一份，并保存至工程完工且工资全部结清后至少3年。
        </div>
      </li>

      <li class="singleBox">
        <div>
          <P class="write">
            甲方(公章)：
            <span>{{ this.contractInfos.companyName || '--' }}</span>
          </P>
          <p class="write">
            法定代表人(主要负责人)或委托代理人（签字或盖章）：
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          </p>
          <p class="write">
            签字日期： &nbsp;&nbsp;年&nbsp;&nbsp;月&nbsp;&nbsp;日
          </p>
        </div>
        <div>
          <P class="write">乙方(签字)：</P>
          <p class="write">
            签字日期： &nbsp;&nbsp;年&nbsp;&nbsp;月&nbsp;&nbsp;日
          </p>
        </div>
      </li>
      <!-- <li>
              <img class="img" src="../../../static/img/employee/wgjs.png" alt="">
          </li>
          <li>
              <img class="img" src="../../../static/img/employee/fyj.png" alt="">
          </li> -->
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  //搜索条件
  props: {
    contractInfos: {
      type: Object,
    },
  },

  created() {
    console.log('wuhan')
  },
  methods: {
    exportContract() {
      this.$emit('exportContract', '')
    },
  },
}
</script>
<style scoped lang="less">
.table {
  text-align: center;
}
.content {
  padding: 5px 35px;
}
.content li {
  margin-bottom: 20px;
  text-indent: 20px;
  text-align: left;
}
.content li ul li {
  margin-bottom: 0px;
  padding-left: 20px;
}
#readContract .content .partyA li,
#readContract .content .partyB li {
  padding-left: 0px;
}
#readContract .content .partyA #companyName {
  display: inline-block;
  padding: 0px;
  width: 235px;
}
#readContract .content .partyA #companyCode {
  display: inline-block;
  padding: 0px;
  width: 243px;
}
#readContract .content .partyA #companyAddress {
  display: inline-block;
  padding: 0px;
  width: 272px;
}
#readContract .content .partyB#companyCode {
  display: inline-block;
  padding: 0px;
  width: 239px;
}
#readContract .content .partyB #companyAddress {
  display: inline-block;
  padding: 0px;
  width: 263px;
}
#readContract .content .partyB #employeeName {
  display: inline-block;
  padding: 0px;
  width: 248px;
}
#readContract .content .partyB #employeeBirthday {
  display: inline-block;
  padding: 0px;
  width: 299px;
}
#readContract .content .partyB #employeeIdcard {
  display: inline-block;
  width: 285px;
  padding: 0px;
}
// .content li div {
//   padding-left: 20px;
// }
.content li .box {
  padding-left: 0;
}
.content li span {
  text-align: center;
  padding: 0px 15px;
  border-bottom: 1px solid black;
}
.content li p {
  margin-bottom: 0px;
  font-size: 14px;
}
.content li div input {
  height: 18px;
  width: 18px;
  vertical-align: bottom;
  margin-right: 10px;
  opacity: 1;
  position: static;
  margin-left: 50px;
}
.content li div label:nth-child(2) {
  margin-left: 50px;
}
#readContractWin + .dialog-button > a {
  opacity: 0;
}
.exportContract {
  float: right;
  height: 32px;
  font-size: 14px;
  padding: 0 10px;
}
.imgCss {
  width: 100px;
  margin-right: 50px;
}
.attendanceDialog .el-form--inline .el-form-item {
  margin-right: 0px;
}

li .pic img {
  vertical-align: top;
  width: 40%;
}

.singleBox div {
  widows: 50%;
}
/deep/ .dialogTable img {
  top: 0;
  left: 0;
  transform: translate(0, 0);
}

.img {
  width: 100%;
}

#readContract .content .el-checkbox {
  margin: 0 2px;
}

.table span,
.empty {
  text-align: center;
  widows: 20px;
  padding: 0px 5px;
  border-bottom: 1px solid black;
}
.desc {
  margin-top: 20px;
}
.write {
  margin-top: 10px;
}
.content li {
  line-height: 21px;
}
</style>
